<template>
    <div class="systemrole">
        <div class="search">
            <span style="padding-right:15px;">名称</span>
            <input type="text" v-model="noticeInput" placeholder="请输入消息名称" style="margin-right:25px;">
            <span style="padding-right:15px;">通知类型</span>
            <el-select v-model="typeValue" placeholder="请选择" style="margin-right:15px;">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <span class="my-btn my-back-blue" @click="getnoticeData">筛选</span>
            <span class="my-btn my-back-gray" @click="emptySearch">清空</span>
            <!-- <span class="my-btn my-back-green" @click="addemployees">一键已读</span> -->
        </div>
        <div style="margin-bottom:18px;">
            <span class="my-btn" style="background:#007bff;color:#fff;padding: 8px 30px;" @click="addemployees">发布</span>
        </div>
        <el-table :data="noticeData" border style="width:100%;">
             <el-table-column  type="index" label="序号"  width="60"></el-table-column>
            <el-table-column prop="noticeTitle" label="通知消息名称"></el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.noticeType==1">系统消息</span>
                    <span v-if="scope.row.noticeType==2">公告</span>
                    <span v-if="scope.row.noticeType==3">站内信</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template slot-scope="scope">
                    <span style="color:#007bff;padding:0 6px;" @click="editorClick(scope.row.noticeId)">详情</span>
                    <span style="color:#007bff;padding:0 6px;" @click="deleClick(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"  :page-sizes="[5, 10, 15, 20]"  layout="total, sizes, prev, pager, next, jumper"  :total="total"></el-pagination>
        <div class="mask" v-if="maskNum">
            <div class="window">
                <div class="window-top">
                    <h3>发布通知公告</h3>
                    <span @click="down">x</span>
                </div>
                <div class="window-content">
                    <div class="content">
                        <span>通知消息名称</span>
                        <input type="text" v-model="addnoticeText.noticeTitle">
                    </div>
                    <div class="content">
                        <span>类型</span>
                        <el-select v-model="addnoticeText.noticeType" placeholder="请选择" style="margin-right:15px;">
                            <el-option v-for="item in typeOptionsDialog" :key="item.value" :label="item.label"  :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <!-- <div class="content">
                        <span>昵称</span>
                        <input type="text" v-model="addnoticeData.name">
                    </div>
                    <div class="content">
                        <span>账号</span>
                        <input type="text" v-model="addnoticeData.username">
                    </div>
                    <div class="content">
                        <span>性别</span>
                        <input type="text" v-model="addnoticeData.sex">
                    </div>
                    <div class="content">
                        <span>是否启用</span>
                        <el-select v-model="addnoticeData.state" placeholder="请选择" style="margin-right:15px;">
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"  :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="content">
                        <span>手机号</span>
                        <input type="text" v-model="addnoticeData.phone">
                    </div>
                    <div class="content">
                        <span>邮箱</span>
                        <input type="text" v-model="addnoticeData.email">
                    </div>
                    <div class="content">
                        <span>密码</span>
                        <input type="text" v-model="addnoticeData.password">
                    </div>
                    <div class="content">
                        <span>角色id数组</span>
                        <input type="text" v-model="addnoticeData.roleIds">
                    </div> -->
                </div>
                <div style="text-align:center;">
                    <span class="my-btn my-btn-blue" style="padding:8px 30px;" @click="submit">提交</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            noticeInput:'',//员工姓名
            typeValue:'',//是否启用
            typeOptions:[//是否启用选择数组
                {value: '1',label: '系统消息'},
                {value: '2',label: '公告'},
                {value: '3',label: '站内信'}
            ],
            addnoticeText: {
                noticeTitle:'',
                noticeType: 1,
            },
            typeOptionsDialog:[//是否启用选择数组
                {value: 1,label: '系统消息'},
                {value: 2,label: '公告'},
                {value: 3,label: '站内信'}
            ],
            noticeData:[],//员工数据
            addnoticeData:{//详情数据
                "email": "",
                "name": "",
                "password": "",
                "phone": "",
                "roleIds": [],
                "sex": "",
                "state": '',
                "username": ""
            },
            page:1,//第几页
            pageSize:6,//每页几条
            currentPage:1,//跳转到第几页
            total:0,//总共几条
            maskNum:false,//控制弹窗弹出
        }
    },
    mounted(){
        this.getnoticeData()
    },
    methods:{
        //获取角色数据
        getnoticeData(){
            var param={
                "page": this.page,
                "pageSize": this.pageSize,
                "noticeTitle":this.noticeInput,
                "noticeType": this.typeValue
            }
            this.axios({
                url: "/notice/getAll",
                method: "post",
                data: JSON.stringify(param),
            }).then(res=>{
                this.noticeData=res.data.data.list
                console.log(this.noticeData)
                this.total=res.data.data.total
            })
        },
        //编辑
        editorClick(id){
            console.log(id)
            this.maskNum=true
            var param={"noticeId": id}
            this.axios({
                url: "/notice/getById",
                method: "post",
                data: JSON.stringify(param),
            }).then(res=>{
                console.log(res)
                this.addnoticeText=res.data.data
            })
        },
        //新增角色
        addemployees(){
            this.maskNum=true
        },
        //提交
        submit(){
            var msg='发布'
            var url="/notice/save"
            this.$confirm('是否'+msg+'该公告', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param=this.addnoticeText
                this.axios({
                    url: url,
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: msg+'成功!'
                    });
                    this.down()
                    this.getnoticeData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });          
            });
        },
        //关闭
        down(){
            this.maskNum=false
            this.addnoticeData={
                "email": "",
                "name": "",
                "password": "",
                "phone": "",
                "roleIds": [],
                "sex": "",
                "state": '',
                "username": ""
            }
            this.addnoticeText={
                noticeTitle:'',
                noticeType: 1,
            }
        },
        //清空
        emptySearch(){
            this.noticeInput=''
            this.typeValue=''
            this.getnoticeData()
        },
        //删除角色
        deleClick(id){
            this.$confirm('您确定要《社区配餐》系统维护通知（'+ id.noticeTitle +'）的消息吗？删除后，用户将不可见。', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param={
                    "platformUserId":id.noticeId
                }
                this.axios({
                    url: "/platform_user/delete",
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getnoticeData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //当每页显示条数变化时触发
        handleSizeChange(val){
            this.pageSize=val
            this.getnoticeData()
        },
        //当页数变化时触发
        handleCurrentChange(val){
            this.page=val
            this.getnoticeData()
        },
    },
}
</script>

<style scoped>
.search{
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.my-btn{
    padding:8px 15px ;
    margin-left: 10px;
    border: 0;
}
.my-btn-blue{
    color: #fff;
    background: #007bff;
}
.my-back-blue{
    color: #007bff;
    background: #007bff2d;
}
.my-back-gray{
    color: #62676d;
    background: #62676d1e;
}
.my-back-green{
    color: #3dc015;
    background: #3dc01518;
}
/* 弹窗开始 */
.mask{
    width:100vw;
    height: 100vh;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(65, 60, 60, 0.555);
}
.window{
    width: 460px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
}
/* 弹窗头 */
.window-top{
    display: flex;
    justify-content: space-between;
}
.window-top h3{
    font-weight: 400;
}
/* 弹窗主体内容 */
.window-content{
    margin: 40px 0 30px;
}
.window-content .content{
    margin-bottom: 15px;
}
.window-content .content span{
    padding-right: 16px;
    display: inline-block;
    width: 100px;
    text-align: right;
}
.window-content .content input{
    width: 280px;
}
/* 弹窗结束 */
</style>